<template>
	<view class="container-box">
		<!-- 搜索框 -->
		<view class="search-box" :class="{'QZBG':GDHEAD}" :style="GDHEAD ? 'padding-right: ' + MPPR + 'px' : ''">
			<!-- <view class="navbar" ></view> -->
			<view class="ctn">
				<view class="hx-search-box">
					<image class="search-icon" src="/static/supermarket/index/icon-search.png" mode="aspectFit"></image>
					<input type="text" value="" focus placeholder="搜索" cursor-spacing="5" confirm-type="search"
						@confirm="doSearch" @keydown.enter="doSearch" />
				</view>
			</view>
		</view>
		<view class="search-tips">
			<view class="search-txt">
				历史搜索
			</view>
			<image src="/static/forum/dell.png" style="width: 24rpx;height: 24rpx;" mode=""></image>
		</view>
		<!-- <store-list ref="storeList"></store-list> -->
		<view class="search-boxs">
			<view class="item-search" v-for="(i,k) in list" :key="k">
				{{i.name}}
			</view>
		</view>
	</view>
</template>

<script>
	// import storeList from '@/pages/Component/supermarket/component/store/list.vue'
	import Vue from 'vue'
	var app = getApp( );
	export default {
		// components: {
		// 	storeList
		// },
		data( ) {
			return {
				list: [ {
						name: '健身'
					},
					{
						name: '饮食'
					},
					{
						name: '生活'
					}
				]
			}
		},
		onLoad( ) {

		},
		onShareAppMessage( ) {
			return {
				title: app.globalData.share_info.share_title,
				path: '/pages/Component/supermarket/Program/search/search',
				imageUrl: app.globalData.share_info.share_img,
			}
		},
		methods: {
			// 搜索
			doSearch( e ) {
				this.$refs.storeList.getStoreList( 0, e.detail.value )
			},
		}
	}
</script>

<style lang="scss">
	.container-box {
		.search-box {
			position: sticky;
			top: 0;
			z-index: 2;

			.ctn {
				border-top-left-radius: 50upx;
				border-top-right-radius: 50upx;
				background: #f8f8f8;
				padding: 15px 15px 12px;

				.hx-search-box {
					border-radius: 40px;
					padding: 0 15px;
					height: 34px;
					display: flex;
					align-items: center;
					line-height: 44rpx;
					background-color: #eeeeee;
					flex: 1;
					color: #888888;
					font-size: 14px;

					.search-icon {
						width: 28rpx;
						height: 28rpx;
						margin-right: 16rpx;
					}

					input {
						width: 100%;
						color: #000;
					}
				}
			}
		}

		.search-tips {
			width: 100%;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			box-sizing: border-box;
			margin-top: 40rpx;

			.search-txt {
				width: 112rpx;
				height: 40rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #247EFF;
				text-align: left;
			}
		}

		.search-boxs {
			width: 100%;
			min-height: 360rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;

			.item-search {
				width: 194rpx;
				height: 72rpx;
				background: #F7F7F7;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				text-align: center;
				line-height: 72rpx;
				margin-right: 24rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>